<template>
  <div class="notifyswitch" v-show="notifySwitchRan">
    <div class="content">
      <div class="row">
        <el-checkbox v-model="checkAll" @change="handleCheckAllChange" class="titile">{{$t('public.checkAll')}}</el-checkbox>
        <p class="text" v-once>
          {{$t('userInfo.notifyPromt')}}
        </p>
      </div>
      <el-checkbox-group v-model="checkedStatus" @change="handleCheckedCitiesChange">
        <div class="row sub-row" v-for="item in notifySwitch" :key="item.value">
          <el-checkbox :label="item.value">{{item.label}}</el-checkbox>
          <p v-once>{{item.content}}</p>
        </div>
      </el-checkbox-group>
    </div>
    <div class="footer">
      <el-button @click="close" class="primary_btn" v-once>{{$t('public.cancel')}}</el-button>
      <el-button type="primary" class="primary_btn" v-once @click="updateNotifySwitch">{{$t('public.confirm')}}</el-button>
    </div>
  </div>
</template>

<script>
  import {deepClone} from '@/utils/m7Utils.js'
  export default {
    name: 'NotifySwitch',
    data () {
      return {
        isIndeterminate: true,
        checkAll: true,
        checkedStatus: ['cdr', 'webchat', 'email', 'customer', 'business', 'monitor'],
        notifySwitch: [
          { label: this.$t('userInfo.callNotify'),
            value: 'cdr',
            content: this.$t('userInfo.callNotifyCont')
          },
          { label: this.$t('userInfo.webchatNotify'),
            value: 'webchat',
            content: this.$t('userInfo.webchatNotifyCont')
          },
          { label: this.$t('userInfo.emailNotify'),
            value: 'email',
            content: this.$t('userInfo.emailNotifyCont')
          },
          { label: this.$t('userInfo.customerNotify'),
            value: 'customer',
            content: this.$t('userInfo.customerNotifyCont')
          },
          { label: this.$t('userInfo.busNotify'),
            value: 'business',
            content: this.$t('userInfo.busNotifyCont')
          },
          { label: this.$t('userInfo.monitorNotify'),
            value: 'monitor',
            content: this.$t('userInfo.monitorNotifyCont')
          }
        ]
      }
    },
    computed: {
      _id () {
        return this.$store.state.session.sessionId
      }
    },
    watch: {
      notifySwitchRan () {
        if (this.$store.state.session && this.$store.state.session.user && this.$store.state.session.user.notifyStatus) {
          this.checkedStatus = deepClone(this.$store.state.session.user.notifyStatus)
          this.handleCheckedCitiesChange()
        } else {
          this.checkAll = true
          this.handleCheckAllChange()
        }
      }
    },
    props: {
      notifySwitchRan: Number
    },
    methods: {
      handleCheckAllChange () {
        let _array = []
        this.notifySwitch.forEach(item => {
          _array.push(item.value)
        })
        this.checkAll ? this.checkedStatus = _array : this.checkedStatus = []
      },
      handleCheckedCitiesChange () {
        if (this.checkedStatus.length === this.notifySwitch.length) {
          this.checkAll = true
        } else {
          this.checkAll = false
        }
      },
      updateNotifySwitch () {
        let data = {
          notifyStatus: this.checkedStatus,
          _id: this._id
        }
        this.$store.dispatch('userEdit', data).then(req => {
          if (req) {
            this.$message({
              message: this.$t('message.editSucess'),
              type: 'success'
            })
          }
        })
        this.close()
      },
      close () {
        console.log(this.$store.state.session.user)
        this.$emit('close')
      }
    },
    beforeMount () {
      if (this.$store.state.session && this.$store.state.session.user && this.$store.state.session.user.notifyStatus) {
        this.checkedStatus = deepClone(this.$store.state.session.user.notifyStatus)
        this.handleCheckedCitiesChange()
      } else {
        this.checkAll = true
        this.handleCheckAllChange()
      }
    }
  }
</script>

<style rel="stylesheet/stylus" lang="stylus">
  .notifyswitch
    .content
      margin 0px
      .titile
        line-height 20px
        margin-bottom 7px
      p
        line-height 20px
        color #a6a6a6
        padding-left 20px
      .sub-row
        padding-top 10px
        padding-left 20px
        p
          padding-left 20px
    .footer
      text-align right
      margin-bottom 10px
      margin-top 15px
</style>
